<template>
  <div class="bot">
    <!-- 合作商点位数Top5 -->
    <div class="left">
      <div class="head">
        <h3>合作商点位数Top5</h3>
        <el-button icon="el-icon-more" circle />
      </div>
      <div class="chart">
        <div ref="cir" class="cir">饼图</div>
        <div class="collect">
          <div class="coll">
            <div class="count">{{ nodeCount }}</div>
            <div class="name">点位数</div>
            <div class="count count2">{{ partnerCount }}</div>
            <div class="name">合作商数</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 异常设备监控 -->
    <div class="right">
      <div class="head">
        <h3>异常设备监控</h3>
        <el-button icon="el-icon-more" circle />
      </div>
      <div class="empty">
        <img src="https://likede2-admin.itheima.net/img/empty.87c4f71b.png" alt>
        <div class="tips">暂无数据</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getNodeCount, getPartnerCount, getNodeCollect } from '@/api/home'
import * as echarts from 'echarts'
export default {
  name: 'HomeFooter',
  data() {
    return {
      nodeCount: 0,
      partnerCount: 0,
      nodeCollects: []
    }
  },
  watch: {
    nodeCollects: {
      immediate: true,
      handler(newVal) {
        this.$nextTick(() => {
          // 基于准备好的dom，初始化echarts实例
          let myChart = echarts.getInstanceByDom(this.$refs.cir)
          if (myChart == null) {
            myChart = echarts.init(this.$refs.cir)
          }
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption({
            tooltip: {
              trigger: 'item'
            },
            series: [
              {
                name: 'Nightingale Chart',
                type: 'pie',
                radius: [36, 120],
                center: ['60%', '50%'],
                roseType: 'radius',
                // 设置各个区域
                itemStyle: {
                  color: function(colors) {
                    var colorList = [
                      '#85a7ff',
                      '#99ebbd',
                      '#ffb18b',
                      '#c6ebff',
                      '#becce6'
                    ]
                    return colorList[colors.dataIndex]
                  }
                },
                label: {
                  formatter: '{b}:{d}%',
                  rich: {
                    name: {
                      fontSize: 12,
                      color: '#333',
                      fontWeight: 700,
                      align: 'left'

                    },
                    bfb: {
                      fontSize: 11,
                      color: '#333',
                      align: 'left',
                      lineHeight: 14
                    }
                  }
                },
                // 提示线
                labelLine: {
                  show: true,
                  length: 10,
                  lineStyle: {
                    color: '#bbb',
                    width: 1,
                    type: 'solid'
                  }
                },
                data: newVal
              }
            ]
          })
        })
      }
    }
  },
  async created() {
    // 获取数据
    const nodeCount = await getNodeCount()
    this.nodeCount = nodeCount
    const partnerCount = await getPartnerCount()
    this.partnerCount = partnerCount
    const nodeList = await getNodeCollect()
    this.nodeCollects = nodeList
  }

}
</script>

<style lang="scss" scoped>
  .bot {
    width: 100%;
    height: 353px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      h3 {
        margin: 0;
        font-size: 16px;
        color: #333;
        font-weight: 600;
        margin-right: 10px;
      }
      ::v-deep .el-button {
        border: 1px solid #5f84ff;
        color: #5f84ff;
        transform: scale(0.5, 0.5);
      }
    }
    .left {
      width: 990px;
      height: 100%;
      padding: 20px;
      border-radius: 20px;
      background-color: #fff;
      text-align: center;
      .chart {
        width: 100%;
        height: 300px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .cir {
          width: 667px;
          height: 284px;
        }
        .collect {
          width: 283px;
          height: 230px;
          .coll {
            width: 154px;
            height: 100%;
            padding-top: 47px;
            background: linear-gradient(135deg, transparent, #f8f8f9 0) 0 0,
              linear-gradient(-135deg, transparent 12px, #f8f8f9 0) 100% 0,
              linear-gradient(-45deg, transparent, #f8f8f9 0) 100% 100%,
              linear-gradient(45deg, transparent 12px, #f8f8f9 0) 0 100%;
            background-size: 50% 50%;
            background-repeat: no-repeat;
            .count {
              height: 33px;
              font-size: 24px;
              font-weight: 600;
              color: #072074;
              line-height: 33px;
            }
            .count2 {
              margin-top: 25px;
            }
            .name {
              height: 17px;
              margin-top: 6px;
              font-size: 12px;
              font-weight: 400;
              color: #000412;
              line-height: 17px;
            }
          }
        }
      }
    }
    .right {
      width: 700px;
      height: 100%;
      padding: 20px;
      border-radius: 20px;
      background-color: #fff;
    }
  }
</style>
